<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML5 and CSS3</title>
    	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#box").hover(function(){
				$(this).toggleClass('shadow');
			});
		});
	</script>
	
	<style type="text/css" rel="stylesheet">
		#box{ background:#ff0000; width:100px; height:100px; float:left;}
		@-webkit-keyframes resize {
			0% {
				width:300px;
			}
			50% {	
				width:900px;
			}
		
			100% {
				width:300px;
			}
		}
		@-webkit-keyframes fade {
			0% {
				opacity:0;
			}
			50% {	
				opacity:100%;
			}
		
			75% {
				opacity:100%;
			}
			100% {	
				opacity:0;
			}
		}
		@-webkit-keyframes rotate {
			0% {
				-webkit-transform: rotate(-30deg); right:0;
			}
			50% {
				-webkit-transform: rotate(0deg);
			}
			100% {
				-webkit-transform: rotate(300deg);
			}
		}
		.flashCont{background:#000; position:relative;}
		.flashContBar{background:#fff; background-size:25px 100%; }
		.flash{ float:right;
				border:1px red solid;
				width:300px; height:250px;
				-webkit-animation-name: resize;
				-webkit-animation-duration: 5s;
				-webkit-animation-iteration-count: 1;
				-webkit-animation-direction: alternate;
				-webkit-animation-timing-function: ease-in-out;
			}
		.space{ background:url('images/bannerImages/space.png') no-repeat top right;width:300px; height:249px; float:right;
			-webkit-animation-name: fade;
				-webkit-animation-duration: 5s;
				-webkit-animation-iteration-count: 1;
				-webkit-animation-direction: alternate;
				-webkit-animation-timing-function: ease-in-out;display:none;
		}
		.earth{url('images/bannerImages/earth.png') no-repeat top right;width:300px; height:249px; float:right;
			-webkit-animation-name: rotate;
				-webkit-animation-duration: 10s;
				-webkit-animation-iteration-count: 1;
				-webkit-animation-direction: alternate;
				-webkit-animation-timing-function: ease-in-out;
		}
	</style>
</head>
<body>
	<section class="flashCont MB15">
		<div class="flash">
			<div class="earth"></div>
			<div class="space"></div>
		</div>
		<div class="flashContBar"><image src="images/fordIco.gif" width="57" height="32" class="FR MB15" /></div>
	</section>
</body>
</html>
